<template>
	<u-popup :show="visible" mode="bottom">
		<view class="header flex_between_center">
			<text class="btn" @click="handleCancle">取消</text>
			<text class="btn confirm" @click="handelConfirm">确定</text>
		</view>
		<view class="content">
			<view class="flex_center" v-if="loading">
				<u-loading-icon size="32rpx"></u-loading-icon>
			</view>
			<view v-else class="history-list">
				<view class="history-item" v-for="(item,index) in historyList" :key="index" @click="orderClick(index)">
					<view class="line-checked" v-if="index===curIndex">
						<u-icon name="checkbox-mark" color="#fff" size="32rpx"></u-icon>
					</view>

					<view class="line">
						<text class="line-title">收货人：</text>
						<text>{{item.takePeople}}</text>
					</view>
					<view class="line">
						<text class="line-title">收货地址：</text>
						<text>{{item.address}}</text>
					</view>
					<view class="line">
						<text class="line-title">联系电话：</text>
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				loading: false,
				historyList: [],
				curIndex: -1,
			}
		},
		methods: {
			open() {
				this.curIndex = -1
				this.queryOrderHistory()
				this.visible = true
			},
			close() {
				this.visible = false
			},
			handleCancle() {
				this.close()
			},
			handelConfirm() {
				this.$emit('confirm', this.historyList[this.curIndex])
				this.close()
			},
			async queryOrderHistory() {
				this.loading = true
				let { openid } = uni.getStorageSync('openId')
				let res = await this.$api.queryOrderHistory({ purchaseOpenId: openid })
				this.loading = false
				if (res.success) {
					this.historyList = res.result
				} else {
					this.historyList = []
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},
			orderClick(index) {
				this.curIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;

		.btn {
			font-size: 28rpx;
			line-height: 1.5;
			cursor: pointer;

			&.confirm {
				color: #1A74FF;
			}

			&:hover {
				opacity: 0.8;
			}
		}
	}

	.content {
		height: 65vh;
		padding: 30rpx;
		overflow-y: auto;

		.history-list {

			.history-item {
				position: relative;
				width: 100%;
				margin-top: 32rpx;
				padding: 24rpx;
				background: #f5f5f5;
				border-radius: 16rpx;
				box-sizing: border-box;
				overflow: hidden;

				.line {
					color: #888;
					font-size: 28rpx;

					.line-title {
						display: inline-block;
						width: 140rpx;
						color: #212121;
					}
				}

				.line-checked {
					position: absolute;
					top: 0;
					right: 0;
					width: 80rpx;
					padding: 10rpx;
					aspect-ratio: 1/1;
					background-color: #1A74FF;
					clip-path: polygon(0 0, 100% 0, 100% 100%);
					box-sizing: border-box;

					display: flex;
					justify-content: flex-end;
					align-items: flex-start;
				}

				&:first-child {
					margin-top: 0rpx;
				}
			}
		}
	}
</style>